<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
        xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="IE=11.0000"
          http-equiv="X-UA-Compatible">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登录--{$Think.config.APP_NAME}</title>
    <script src="__PUBLIC__/js/jquery.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/jquery.md5.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/app.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/login/css/style.css"/>

    <script type="text/javascript">
        $(function () {
            //得到焦点
            $("#password").focus(function () {
                $("#left_hand").animate({
                    left: "150",
                    top: " -38"
                }, {
                    step: function () {
                        if (parseInt($("#left_hand").css("left")) > 140) {
                            $("#left_hand").attr("class", "left_hand");
                        }
                    }
                }, 2000);
                $("#right_hand").animate({
                    right: "-64",
                    top: "-38px"
                }, {
                    step: function () {
                        if (parseInt($("#right_hand").css("right")) > -70) {
                            $("#right_hand").attr("class", "right_hand");
                        }
                    }
                }, 2000);
            });
            //失去焦点
            $("#password").blur(function () {
                $("#left_hand").attr("class", "initial_left_hand");
                $("#left_hand").attr("style", "left:100px;top:-12px;");
                $("#right_hand").attr("class", "initial_right_hand");
                $("#right_hand").attr("style", "right:-112px;top:-12px");
            });

            $('#loginForm').keyup(function (event) {
                if(event.keyCode != 13) return false;
                doLogin();
                return false;
            });
            $('#loginForm').on('submit', function () {
                doLogin();
                return false;
            });
            $('.login_btn').click(function () {
                doLogin();
                return false;
            });

            //登录操作
            function doLogin() {
                var data = {};
                data.account = $('#account').val();
                data.password = $.md5($('#password').val() + app.md5_salt);
                $.post(app.api + 'auth/login/index', data, function (response) {
                    if (response.error == '0') {
                        if ($('#remember').attr('checked')) {
                            app.store('remember', 1);
                            app.store('account', data.account);
                            app.store('password', data.password);
                        }
                        app.store('token', response.data.token);
                        app.store('refresh_token', response.data.refresh_token);
                        app.store('nickname', data.nickname);
                        error(response.message);
                        app.jump('/app/Sys/Index/index');
                    } else {
                        error( '登录失败:'+response.message);
                        app.store('token', null);
                    }
                });
            }

            function error(msg) {
                $('.error').html(msg);
            }
        });
    </script>
</head>
<body>
<div class="top_div"></div>
<div class="login_div">
    <form id="loginForm">
        <div class="hand_div">
            <div class="tou"></div>
            <div class="initial_left_hand" id="left_hand"></div>
            <div class="initial_right_hand" id="right_hand"></div>
        </div>
        <p style="padding: 30px 0px 10px; position: relative;"><span
                class="u_logo"></span> <input class="ipt" id="account" type="text" placeholder="请输入用户名、手机号或邮箱" value="">
        </p>
        <p style="position: relative;"><span class="p_logo"></span>
            <input class="ipt" id="password" type="password" placeholder="请输入密码" value="">
        </p>
        <div class="error"></div>
        <div class="btn_bar">
            <p style="margin: 0px 35px 20px 45px;">
            <span style="float: left;">
                <a class="text-gray" href="#">忘记密码?</a>
            </span>
           <span style="float: right;">
               <a class="reg_btn text-gray" href="__URL__/reg">注册</a>
              <a class="login_btn" href="javascript:void(0);">登录</a>
           </span>
            </p>
        </div>
    </form>
</div>
<div style="text-align:center;">
    <p>{$Think.config.COPY_RIGHT}</p>
</div>
</body>
</html>
